<template>
    <!-- 雷达图容器 -->
    <div ref="chartRef" class="radarChart"></div>
</template>

<script setup>
// 引入 vue 相关方法
import { ref, onMounted } from 'vue'
// 引入 echarts
import * as echarts from 'echarts'
// 引入防抖工具
import { debounce } from '@/tools/debounce.js'
// 引入样式
import '@/assets/chart.css'

const chartRef = ref(null) // 图表 DOM 引用
let myChart = null // echarts 实例
const windowWidth = ref(window.innerWidth) // 窗口宽度

// 雷达图指标
const indicator = [
    { name: '指标1', max: 100 },
    { name: '指标2', max: 100 },
    { name: '指标3', max: 100 },
    { name: '指标4', max: 100 },
    { name: '指标5', max: 100 },
]

let intervalId = null // 定时器 id

// 雷达图初始数据
const seriesData = [
    {
        type: 'radar',
        data: [
            {
                value: [20, 30, 40, 50, 60, 70],
                name: '系列1'
            },
            {
                value: [10, 20, 30, 40, 50, 60],
                name: '系列2'
            },
            {
                value: [11, 22, 33, 44, 55, 66],
                name: '系列3'
            }
        ]
    }
]

onMounted(() => {
    // 只有容器有宽高时才初始化
    if (chartRef.value.clientWidth > 0 && chartRef.value.clientHeight > 0) {
        initChart()
        // 监听窗口大小变化，动态调整图表
        window.addEventListener('resize', debounce(() => windowWidth.value = window.innerWidth, 200))
        // 移动端自适应
        if (windowWidth.value < 768) {
            myChart.resize({
                width: 300,
                height: 300
            })
        }
        // 启动动态数据更新
        startDynamicUpdate()
    }
})

// 初始化雷达图
function initChart() {
    myChart = echarts.init(chartRef.value)

    const option = {
        tooltip: {},
        legend: {
            data: ['系列1', '系列2', '系列3'],
            orient: 'vertical', // 图例列表的布局朝向
            left: 'left', // 图例组件离容器右侧的距离
            top: 'top', // 图例组件离容器顶部的距离
        },
        radar: {
            axisName: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5],
                },
            },
            indicator: indicator,
        },
        series: seriesData,
    }

    myChart.setOption(option)
}

// 启动定时器动态更新数据（模拟请求新数据）
function startDynamicUpdate() {
    intervalId = setInterval(() => {
        // 生成新的随机数据 //替换成请求数据
        const newData1 = indicator.map(() => Math.floor(Math.random() * 100))
        const newData2 = indicator.map(() => Math.floor(Math.random() * 100))
        const newData3 = indicator.map(() => Math.floor(Math.random() * 100))

        // 更新图表数据
        myChart.setOption({
            series: [
                {
                    type: 'radar',
                    data: [
                        {
                            value: newData1,
                            name: '系列1'
                        },
                        {
                            value: newData2,
                            name: '系列2'
                        },
                        {
                            value: newData3,
                            name: '系列3'
                        }
                    ]
                }
            ],
        })
    }, 10000) // 每隔10秒更新一次数据
}
</script>